<template>
  <div>
    <Row :gutter="16">
      <Col :xs="24" :sm="12" :md="12" :lg="6" style="margin-bottom: 14px">
        <Jdd-TopSingle v-model="cardInfo[0]" />
      </Col>
      <Col :xs="24" :sm="12" :md="12" :lg="6" style="margin-bottom: 14px">
        <Jdd-TopSingle v-model="cardInfo[1]" />
      </Col>
      <Col :xs="24" :sm="12" :md="12" :lg="6" style="margin-bottom: 14px">
        <Jdd-TopSingle v-model="cardInfo[2]" />
      </Col>
      <Col :xs="24" :sm="12" :md="12" :lg="6" style="margin-bottom: 14px">
        <Jdd-TopSingle v-model="cardInfo[3]" />
      </Col>
    </Row>
    <Row :gutter="16" style="display:flex;">
      <Col span="18">
        <Card >
          <div slot="title" style="display:flex;position:relative;">
            <div style="display:flex;align-items:center;">
              <Jdd-Icon type="icon-allApps" style="margin-right:4px;"></Jdd-Icon>
              {{$t('home.main.applicationManagement')}}
            </div>
            <DatePicker
              v-model="times"
              type="datetimerange"
              placeholder="Select date and time(Excluding seconds)"
              style="width:320px;right:0;top:-8px;position:absolute;"
              @on-change="timesa"
            ></DatePicker>
          </div>
          <div style="display:flex;">
            <Jdd-Charts
              :type="'line'"
              :interval="0"
              :url="'/home/chart'"
              :refurbishMode="'add'"
              :width="'100%'"
              :height="'300px'"

              :autoLoad="true"
            ></Jdd-Charts>
            <div class="main-echarts-list">
              <div class="main-echarts-list-title">该时段内存使用排名</div>
              <div class="main-echarts-list-item" v-for="(item,index) in 7" :key="index">
                <div class="main-echarts-list-item-rank">{{'TOP'+ (index + 1)}}</div>
                <div class="main-echarts-list-item-appname">{{'app' + (index + 1)}}</div>
                <div class="main-echarts-list-item-percentage">{{'50%'}}</div>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col span="6">
        <Jdd-Card  style="height:100%;border:none;">
          <Jdd-Event
            ref="event"
            style="height:368px;"
            :maxHeight="368"
            v-bind="eventObj"
            @click="$Message.info('事件轴点击操作，返回点击项数据对象')"
          ></Jdd-Event>
        </Jdd-Card>
      </Col>
    </Row>
    <Row :gutter="16" style="margin-top:16px;">
      <Col span="12">
        <Card >
          <div slot="title" style="display:flex;">
            <Jdd-Icon type="icon-sysStatistics" style="margin-right:4px;"></Jdd-Icon>
            {{'饼图'}}
          </div>
          <Jdd-Charts
            :type="'pie'"
            :interval="0"
            :url="'/home/piechart'"
            :config="pieCharts"
            :height="'200px'"
          ></Jdd-Charts>
        </Card>
      </Col>
      <Col span="6">
        <Card  style="height:310px;text-align:center;">
          <div slot="title" style="display:flex;">
            <Jdd-Icon type="icon-sysStatistics" style="margin-right:4px;"></Jdd-Icon>
            {{'机器信息'}}
          </div>
          <Jdd-Circle v-model="circleData[0]" :size="200" style="text-align:center;"></Jdd-Circle>
        </Card>
      </Col>
      <Col span="6">
        <Card  style="height:310px;">
          <div slot="title" style="display:flex;">
            <Jdd-Icon type="icon-sysStatistics" style="margin-right:4px;"></Jdd-Icon>
            {{'节点版本分布'}}
          </div>
          <Jdd-Charts
            :type="'radar'"
            :url="'/home/radarchart'"
            :height="'200px'"
          ></Jdd-Charts>
        </Card>
      </Col>
    </Row>
    <Card :bordered="false" style="margin-top:16px;">
      <div slot="title">
        <Row style="display: flex;align-items: center;margin: -9px 0px;">
          <Col :span="12">
            <div style="display:flex;align-items:center;">
              <Jdd-Icon type="icon-chart" style="margin-right:8px" :size="16" />
              <span style="font-size:16px;color: #515A6E;">告警趋势图</span>
            </div>
          </Col>
          <Col :span="12" style="text-align:right;">
            <DatePicker
              v-model="times"
              type="datetimerange"
              placeholder="Select date and time(Excluding seconds)"
              style="min-width:320px;"
              @on-change="timesa"
            ></DatePicker>
          </Col>
        </Row>
      </div>
      <Jdd-Charts
        ref="myCharts"
        type="bar"
        url="/home/alarmChart"
        :interval="0"
        :refurbishMode="'cover'"
        :width="'100%'"
        :height="'200px'"
        :autoLoad="true"
      ></Jdd-Charts>
    </Card>
    <Row style="margin-top:16px;display:flex;" :gutter="12">
      <Col :xs="24" :sm="24" :md="12" :lg="12">
        <Card :bordered="false">
          <div slot="title" style="display:flex;align-items:center;">
            <Jdd-Icon type="icon-chart" style="margin-right:8px" :size="16" />
            <span style="font-size:16px;color: #515A6E;">内存使用率</span>
          </div>
          <Jdd-Charts
            ref="memoryCharts"
            type="bar"
            url="/home/memoryChart"
            :interval="0"
            :refurbishMode="'cover'"
            :width="'100%'"
            :height="'200px'"
            :autoLoad="true"
          ></Jdd-Charts>
        </Card>
      </Col>
      <Col :xs="24" :sm="24" :md="12" :lg="12">
        <Card :bordered="false" style="height:100%;">
          <div slot="title" style="display:flex;align-items:center;">
            <Jdd-Icon type="icon-chart" style="margin-right:8px" :size="16" />
            <span style="font-size:16px;color: #515A6E;">查询命中率</span>
          </div>
          <!-- <Jdd-Charts
            ref="searchCharts"
            type="bar"
            url="/home/searchChart"
            :interval="0"
            :refurbishMode="'cover'"
            :width="'100%'"
            :height="'300px'"
            :autoLoad="true"
          ></Jdd-Charts>-->
          <Jdd-Card>
            <Jdd-StatusCodeImg code="no-data" size="small" smallText="333333"></Jdd-StatusCodeImg>
          </Jdd-Card>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: 'main',
  data () {
    return {
      cardInfo: [
        {
          icon: 'icon-allApps',
          color: '#36B8F9',
          num: '2000',
          name: '标题标题标题',
          bgColor: 'rgba(54,184,249,0.10)',
          borderColor: '#36B8F9',
          bgIcon: 'icon-allApps',
          bgIconFontSize: 50
        },
        {
          icon: 'icon-openOrder',
          color: '#5EB95E',
          num: '2000',
          name: '标题标题',
          bgColor: 'rgba(94,185,94,0.10)',
          borderColor: '#5EB95E',
          bgIcon: 'icon-openOrder',
          bgIconFontSize: 50
        },
        {
          icon: 'icon-expansionOrder',
          color: '#F0B619',
          num: '2000',
          name: '标题标题',
          bgColor: 'rgba(240,182,25,0.10)',
          borderColor: '#F0B619',
          bgIcon: 'icon-expansionOrder',
          bgIconFontSize: 50
        },
        {
          icon: 'icon-delOrder',
          color: '#F05A28',
          num: '2000',
          name: '标题标题',
          bgColor: 'rgba(240,90,40,0.10)',
          borderColor: '#F05A28',
          bgIcon: 'icon-delOrder',
          bgIconFontSize: 50
        }
      ],
      eventObj: {
        title: '事件轴',
        list: [
          {
            id: 1,
            msg:
              '严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重严重',
            level: 'CRITICAL',
            time: '2019-12-12 23:23:32'
          },
          {
            id: 2,
            msg:
              '警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告警告',
            level: 'HIGH',
            time: '2019-12-12 23:23:32'
          },
          {
            id: 3,
            msg:
              '通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知通知',
            level: 'LOW',
            time: '2019-12-12 23:23:32'
          }
        ],
        filter: true,
        size: 2,
        maxHeight: 220
      },
      pieCharts: {
        图例1: { color: '#F3BB25' },
        图例2: { color: '#5EB95E' },
        图例3: { color: '#5A60FE' }
      },
      times: [new Date(1562138005000), new Date(1562141605000)],
      circleData: [{ text: '使用率', percent: 5, color: '#5EB95E' }]
    }
  },
  methods: {

    timesa () {
      console.log(this.times)
    }
  },
  mounted () {
    this.getEvents()
  }
}
</script>

<style type="text/less" lang="less">
.main-echarts-list {
  width: 40%;
  padding: 0 16px;
  margin-left: 16px;
  &-title {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 0 10px 0;
  }
  &-item {
    display: flex;
    padding: 9px 4px;
    cursor: pointer;
    &:hover {
      background: #ebf7ff;
      color: #88bff7;
    }
    &-rank {
      font-size: 14px;
      margin-right: 8px;
    }
    &-appname {
      flex: 1;
    }
    &-percentage {
      width: 30px;
    }
  }
}
</style>
